<template>
    <div class="about-wrap">
        <web-header :selectnum="2"></web-header>
        <div class="about-us">
            <!-- <div class="banner"></div> -->
            <div class="about-content">
                <div class="about-item">
                    <div class="title">公司简介 <span>Company Profile</span></div>
                    <div class="desc">
                        <div class="left">
                            <img class="inside" :src="require('../../images/16.png')">
                            <img class="outside" :src="require('../../images/15.jpg')">
                        </div>
                        <div class="right">
                            <div class="inside-title">创巢中小企业众扶平台</div>
                            <div class="inside-content">
                                创巢平台是一家专注于科技中小企业风险贷款综合解决方案的提供商。目前获得中国银行、江苏银行、北京银行、泰隆银行等多家科技银行超过10亿元风险贷款专项额度。创巢平台创新服务模式获得了工信部、国务院内参的专题刊载，成为国内使用风险贷款模式解决科技中小微企业融资难题的先行者。
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="about-content" style="background-color: #ffffff">
                <div class="about-item">
                    <div class="title">业务视频介绍<span>Business Video</span></div>
                    <div class="desc">
                        <div class="video-wrapper">
                            <div class="video-title">
                                <img :src="require('../../images/播放.png')">
                                风险贷款
                            </div>
                            <div class="video-content">
                                <video src="http://1252042124.vod2.myqcloud.com/8bddf4bevodtransgzp1252042124/058edda97447398157017358131/v.f20.mp4" controls="controls"></video>
                            </div>
                        </div>
                        <div class="video-wrapper">
                            <div class="video-title">
                                <img :src="require('../../images/播放.png')" alt="">
                                创巢认股期权
                            </div>
                            <div class="video-content">
                                <video src="http://1252042124.vod2.myqcloud.com/8bddf4bevodtransgzp1252042124/17e6fc727447398157014094884/v.f20.mp4" controls="controls"></video>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <web-footer style="margin-top: 50px" itembold=0 separatorshow=0></web-footer>
        </div>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js'),
    common = require('../../common.js');
export default {
    data() {
        return {

        }
    },
    components: {
        'web-header':() => import('../common/web-header'),
        'web-footer':() => import('../common/web-footer')
    },  
    mounted(){
        document.body.scrollTop = document.documentElement.scrollTop = 0;

    },
    methods:{}
}
</script>

<style lang="scss">
.about-item {
    width: 1197px;
    .title{
        position: relative;
        font-size: 20px;
        color: #111;
        margin-bottom: 39px;
        padding-left: 10px;
        margin: auto;
        &:before{
            position: absolute;
            left: 0;
            top: 5px;
            content: '';
            width: 2px;
            height: 17px;
            background-color: #ED7018;
        }
        span{
            font-size: 16px;
            color: #666;
            margin-left: 10px;
            font-family: MicrosoftYaHei;
        }
    }
    .desc {
        height: 100%;
        display: flex;
        justify-content: space-between;
        .video-wrapper {
            .video-title {
                color: #000000;
                font-size: 24px;
                line-height: 25px;
                img {
                    width: 24px;
                    height: 24px;
                    margin-right: 18px;
                }
            }
            .video-content {
                margin-top: 30px;
                width: 581px;
                height: 365px;
                background-color: #f9f9f9;
                video {
                    width: 100%;
                }
            }
        }
        .left {
            flex: 1;
            height: 100%;
            position: relative;
            img {
                position: absolute;
                left: 0;
                top: 0;
            }
            .inside {
                width: 364px;
                height: 250px;
            }
            .outside {
                width: 435px;
                height: 280px;
                top: 43px;
                left: 200px;
                box-shadow: 0 0 30px #aaaaaa;
            }
        }
        .right {
            width: 521px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            margin-bottom: 160px;
            .inside-title {
                color: #333333;
                font-size: 24px;
            }
            .inside-content {
                margin-top: 25px;
                font-size: 16px;
                color: #666666;
                line-height: 35px;
            }
        }
    }
}
.about-wrap{
    .banner{
        height: 500px;
        width: 100%;
        background:  url(../../images/banner1.png) no-repeat center;
        width: 100%;
    }
    .about-content{
        width:1197px;
        width: 100%;
        height: 470px;
        display: flex;
        justify-content: center;
        background-color: #f2f2f2;
        padding-top: 34px;
        .footer-wrap{
            .imgs-wrap{
                width: 1197px;
                margin-left: 10%;
                img{
                    width: 84%;
                    background-image:url(../../images/13.png);
                    background-size:container;
                    margin-right: 4%;
                    position: absolute;
                    top: 50%;
                    height: 168px;
                    margin-top: -84px;
                }
            }
            .el-carousel {
                overflow-y: hidden;
            }
            .el-carousel__arrow{
                border: 1px solid #d1d1d1;
                background-color: #fff;
                i{
                    color: #999;
                    font-size: 20px;
                }
            }
        }
        .desc{
            margin-top: 39px;
            overflow: hidden;
            margin-bottom: 25px;
            img{
                float: left;
                height: 312px;
                width: 468px;
                margin-right: 28px;
            }
            .info{
                float: left;
                width: 701px;
                font-size:14px;
                color: #666;
                p{
                    line-height: 33px;
                }
                p:nth-child(1) {
                    margin-top: 0px;
                }
            }
        }
        .imgs{
            margin-top: 80px;
            img{
                display: block;
                width: 639px;
                height: 617px;
                margin:  0 auto;
            }
        }
    }
}
</style>
